<script setup lang='ts'>
const accessType = ref(['客户端'])
const checkList = ref(['私有应用'])
const value1 = ref('单出口/带宽')
const cpeNodeList = ref([{}])
const vcpeNodeList = ref([
  {},
])
const clientNodeList = ref([
  {},
])

function addNode(type = 'cpe') {
  console.log('[ type ]-14', type)
  if (type === 'cpe')
    cpeNodeList.value.push({})
  else if (type === 'vcpe')
    vcpeNodeList.value.push({})
  else if (type === 'client')
    clientNodeList.value.push({})
}
function delNode(index: number, type = 'cpe') {
  if (type === 'cpe')
    cpeNodeList.value.splice(index, 1)
  else if (type === 'vcpe')
    vcpeNodeList.value.splice(index, 1)
  else if (type === 'client')
    clientNodeList.value.splice(index, 1)
}
</script>

<template>
  <el-form-item label="访问类型">
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="私有应用" value="私有应用" />
      <el-checkbox label="应用加速" value="应用加速" />
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="应用类型">
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="URL" value="URL" />
      <el-checkbox label="IP" value="IP" />
      <el-checkbox label="APP" value="APP" />
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="加速模式">
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="正向" value="正向" />
      <el-checkbox label="反向" value="反向" />
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="出口要求">
    <el-radio-group v-model="value1">
      <el-radio-button label="单出口/带宽" />
      <el-radio-button label="多出口/带宽" />
    </el-radio-group>
  </el-form-item>
  <div flex gap-3>
    <el-form-item label="出口区域">
      <el-select placeholder="" class="!w-50">
        <el-option label="上海" value="上海" />
        <el-option label="北京" value="北京" />
        <el-option label="广州" value="广州" />
        <el-option label="深圳" value="深圳" />
      </el-select>
    </el-form-item>
    <el-form-item label="带宽">
      <el-input>
        <template #append>
          M
        </template>
      </el-input>
    </el-form-item>
    <el-button v-if="value1 === '多出口/带宽'" type="primary">
      +
    </el-button>
  </div>

  <div class="form-block !border-amber" data-title="客户业务节点">
    <el-form-item label="部署形式">
      <el-checkbox-group v-model="accessType">
        <el-checkbox label="CPE" value="CPE" />
        <el-checkbox label="VCPE" value="VCPE" />
        <el-checkbox label="客户端" value="客户端" />
      </el-checkbox-group>
    </el-form-item>
    <div v-if="accessType.includes('CPE')">
      <el-divider direction="horizontal">
        CPE节点
      </el-divider>
      <div w-full flex gap3>
        <BaseTable
          :data="cpeNodeList"
          style="width: 100%;min-width:800px"
        >
          <el-table-column prop="name" label="节点名称">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="dispalyName" label="带宽">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="HA" width="150">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="流量分析" width="150">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="使用人数">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="email" label="对接方式" width="200">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio-button label="单臂" />
                <el-radio-button label="网关" />
                <el-radio-button label="串接" />
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="操作" width="200">
            <!-- 自定义表头 -->
            <template #header>
              <el-button type="primary" @click="addNode('cpe')">
                +
              </el-button>
            </template>
            <template #default="{ row, $index }">
              <el-button type="danger" @click="delNode($index, 'cpe')">
                -
              </el-button>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>
    <div v-if="accessType.includes('VCPE')">
      <el-divider direction="horizontal">
        VCPE节点
      </el-divider>
      <div w-full flex gap3>
        <BaseTable
          :data="vcpeNodeList" style="width: 100%;min-width:800px"
        >
          <el-table-column prop="name" label="节点名称">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="dispalyName" label="带宽">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="HA" width="150">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="流量分析" width="150">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
                  {{ item }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="使用人数">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column label="虚机提供方">
            <template #default="{ row }">
              <el-select placeholder="">
                <el-option label="我方" value="我方" />
                <el-option label="阿里" value="阿里" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="对接方式" width="200">
            <template #default="{ row }">
              <el-radio-group>
                <el-radio-button label="单臂" />
                <el-radio-button label="网关" />
                <el-radio-button label="串接" />
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="操作" width="200">
            <!-- 自定义表头 -->
            <template #header>
              <el-button type="primary" @click="addNode('vcpe')">
                +
              </el-button>
            </template>
            <template #default="{ row, $index }">
              <el-button type="danger" @click="delNode($index, 'vcpe')">
                -
              </el-button>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>
    <div v-if="accessType.includes('客户端')">
      <el-divider direction="horizontal">
        客户端
      </el-divider>
      <div w-full flex gap-3>
        <BaseTable
          :data="clientNodeList" style="width: 100%; min-width:800px"
        >
          <el-table-column prop="name" label="客户端数量">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="dispalyName" label="客户端人员区域描述" width="300">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="phohne" label="LADP">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column label="客户端类型">
            <template #default="{ row }">
              <el-input />
            </template>
          </el-table-column>
          <el-table-column prop="email" label="操作" width="200">
            <!-- 自定义表头 -->
            <template #header>
              <el-button type="primary" @click="addNode('client')">
                +
              </el-button>
            </template>
            <template #default="{ row, $index }">
              <el-button type="danger" @click="delNode($index, 'client')">
                -
              </el-button>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>
  </div>
</template>

  <style scoped lang="scss" />
